<template>
    <!-- 请绑定课程信息 -->
    <div class="form-group course">

        <div class="input-group">
            <h6>用户个人信息</h6>
            <h6 v-if="informData == ''" style="color:red;">*身份信息不存在</h6>
            <h6 v-if="informData == '-1'" style="color:red;">*身份信息已过期</h6>

            <ul>
                <li>
                    <span>手机号</span>
                    <span>{{ theUserList.phone }}</span>
                </li>
                <li>
                    <span>账号</span>
                    <span>{{ theUserList.account }}</span>
                </li>
                <li>
                    <span>昵称</span>
                    <span>{{ theUserList.nickName }}</span>
                </li>
                <li>
                    <span>身份证到期日期</span>
                    <span>{{ theUserList.cardExpireDate }}</span>
                </li>
                <li>
                    <span>用户身份证正面图</span>
                    <span>{{ theUserList.idCardFontUrl }}</span>
                </li>
                <li>
                    <span>用户身份证背面图</span>
                    <span>{{ theUserList.idCardBackUrl }}</span>
                </li>
                <li>
                    <span>居住</span>
                    <span>{{ theUserList.province +'-'+ theUserList.city +'-'+ theUserList.county  }}</span>
                </li>
                <li>
                    <span>详细地址（精确到门牌号）</span>
                    <span>{{ theUserList.address }}</span>
                </li>
                <li>
                    <span>邮箱地址</span>
                    <span>{{ theUserList.email }}</span>
                </li>
                <li>
                    <span>qq号码</span>
                    <span>{{ theUserList.qq }}</span>
                </li>
                <li>
                    <span>微信号码</span>
                    <span>{{ theUserList.wx }}</span>
                </li>
            </ul>
        </div>
        <div class="input-group">
            <h6>其他信息</h6>
            <ul>
                <li>
                    <span>学历</span>
                    <span>{{ theUserList.education }}</span>
                </li>
                <li>
                    <span>专业</span>
                    <span>{{ theUserList.major }}</span>
                </li>
                <li>
                    <span>毕业院校</span>
                    <span>{{ theUserList.school }}</span>
                </li>
                <li>
                    <span>工作状态</span>
                    <span>{{ theUserList.workingState }}</span>
                </li>
                <li>
                    <span>最近学习意向</span>
                    <span>{{ theUserList.intention }}</span>
                </li>
                <li>
                    <span>是否有驾照</span>
                    <span>{{ theUserList.drivingLicense }}</span>
                </li>
            </ul>
        </div>
        <div class="input-group">
            <h6>紧急联系人信息</h6>
            <ul>
                <li>
                    <span>紧急联系人关系</span>
                    <span>{{ theUserList.urgentRelation }}</span>
                </li>
                <li>
                    <span>紧急联系人姓名</span>
                    <span>{{ theUserList.urgentName }}</span>
                </li>
                <li>
                    <span>紧急联系人电话</span>
                    <span>{{ theUserList.urgentPhone }}</span>
                </li>
                <li>
                    <span>紧急联系人居住城市</span>
                    <span>
                        {{ theUserList.urgentProvince}}+{{ theUserList.urgentCity }}+{{theUserList.urgentCounty }}
                    </span>
                </li>
                <li>
                    <span>紧急联系人详细地址</span>
                    <span>{{ theUserList.urgentAddress }}</span>
                </li>
                <li>
                    <span>创建时间</span>
                    <span>{{ theUserList.createTime }}</span>
                </li>
                <li>
                    <span>修改时间</span>
                    <span>{{ theUserList.updateTime }}</span>
                </li>
                <li>
                    <span>上次登录时间</span>
                    <span>{{ theUserList.lastLoginTime }}</span>
                </li>
                
            </ul>
        </div>
    </div>

</template>

<script>
import { get_UserDetail,get_UserInformDate } from '../../api/public/api';

export default {
    name: 'UserDetail',
    data() {
        return {
            theUserList: {},
            informData:'',
        }
    },
    methods: {
        getData() {
           let _id= this.$route.query.id;

            // console.log('this.$route.query.id', this.$route.query.id);
            get_UserDetail(_id).then(res => {
                // console.log('res,res',res.data);
                if (res.data.code == 0) {
                    
                    res.data.data.map(item => {
                        const t = new Date(item.createTime)
                        const y = t.getFullYear()
                        const m = t.getMonth() + 1
                        const d = t.getDate()
                        item.createTime = y + "-" + m + "-" + d
                    })
                    res.data.data.map(item => {
                        const t = new Date(item.cardExpireDate)
                        const y = t.getFullYear()
                        const m = t.getMonth() + 1
                        const d = t.getDate()
                        item.cardExpireDate = y + "-" + m + "-" + d
                    })

                    
                    this.theUserList = res.data.data[0]
                    // console.log('----', res.data.data);
                }


            })

        },
        getUserInformDate(){
            let _id= this.$route.query.id;
            get_UserInformDate(_id).then(res=>{
                if (res.data.code == 0) {
                    this.informData = res.data.data;
                }

            }).catch(error =>{
                this.$message.error(error)
            })
        }
    },
    created() {
        this.getData()
        this.getUserInformDate()
    }

}
</script>

<style>
.course {
    width: 800px;
    margin: auto;
}

.input-group {
    margin-top: 10px;
}

.course>.input-group {
    /* background-color: rgb(248, 248, 248) !important; */
    background-color: rgb(248, 248, 248);
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.course .input-group ul li {
    display: flex;
    justify-content: space-between;
}

.course .input-group ul li {
    width: 100%;
    border-bottom: 1px solid #f3f2f2 !important;
    height: 40px;
    line-height: 40px;
}
</style>